<template>
  <a-config-provider :locale="locale">
    <div class="ad-list-box">
      <!-- 搜素条件盒子 -->
      <div class="ad-list-search-box">
        <div>
          <a-form-model layout="inline" :model="formInline">
            <a-form-model-item>
              <a-input-search v-model="formInline.value" placeholder="广告标题">
              </a-input-search>
            </a-form-model-item>
            <a-form-model-item>
              <a-select v-model="formInline.status" placeholder="状态" style="width: 200px" showSearch  optionFilterProp="children" allowClear>
                <a-select-option value="1">上架</a-select-option>
                <a-select-option value="-1">下架</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item>
              <a-button
                type="primary"
                @click="handleSubmit"
              >
                查询
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <a-button icon="plus" @click="addDeviceFn">新增</a-button>
      </div>
      <!-- table列表盒子 -->
      <div class="ad-list-table-box">
        <a-table 
        :columns="columns" 
        :data-source="data" 
        :pagination="false"
        :rowKey="record => record.id"
        :loading="tableLoading"
        >
          <span slot="name" slot-scope="text, record">
            <span>{{ record.name }}</span>
            <a-tag v-if="record.sort === 1" color="#108ee9">已置顶</a-tag>
          </span>
          <span slot="time" slot-scope="text, record" style="display: flex;flex-direction: column;">
            <span>开始时间：{{ record.beginTime | formatDate('yyyy-MM-dd hh:mm')}}</span>
            <span>结束时间：{{ record.endTime | formatDate('yyyy-MM-dd hh:mm')}}</span>
          </span>
          <span slot="statusStr" slot-scope="text, record">
            <span v-if="record.statusStr === '上架'">上架</span>
            <span v-else style="color:#ccc;">下架</span>
          </span>
          <span slot="action" slot-scope="text, record">
            <a v-if="record.statusStr === '上架'" style="margin-left:8px;" @click="stickFn(record)">置顶</a>
            <a style="margin-left:8px;" @click="editFn(record)">编辑</a>
            <a style="margin-left:8px;color:#f50;" @click="deleteFn(record)">删除</a>
          </span>
        </a-table>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <a-pagination
          v-model="pageNum" 
          :total="total" 
          show-less-items 
          show-size-changer 
          show-quick-jumper
          :showTotal="showTotal"
          @change="changePage"
          @showSizeChange="changePageSize"
          />
      </div>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
const columns = [
  {
    title: '广告标题',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '有效日期',
    key: 'time',
    dataIndex: 'time',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: '所属校区',
    key: 'campusName',
    dataIndex: 'campusName',
    scopedSlots: { customRender: 'campusName' },
    width:150,
    ellipsis: true
  },
  {
    title: '状态',
    key: 'statusStr',
    dataIndex: 'statusStr',
    align: 'center',
    scopedSlots: { customRender: 'statusStr' },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data(){
    return {
      locale: zhCN,
      formInline: { // 搜索的form数据
        value:'',
        status:undefined
      },
      data:[], // table数据 
      columns,
      pageNum:1, // 当前页
      pageSize:10, // 当前页展示条数
      total:null,
      tableLoading:false
    }
  },
  created(){
    this.getDataList()
  },
  methods:{
    // 获取数据
    getDataList(){
      this.tableLoading = true
      this.$axios.post('/rc/api/advert/list',{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        status:this.formInline.status ? this.formInline.status : 0,
        title:this.formInline.value
      }).then(res => {
        if(res.success){
          this.data = res.data.records
          this.total = res.data.total // 总条数
          this.tableLoading = false
        }
      })
    },
    // 展示当前总条数
    showTotal(total, range){
      return `当前显示${range[0]}-${range[1]}条，共有 ${total}条`
    },
    // 改变分页
    changePage(page, pageSize){
      this.pageNum = page
      this.pageSize = pageSize
      this.getDataList()
    },
    // 改变条数
    changePageSize(current, size){
      this.pageNum = current
      this.pageSize = size
      this.getDataList()
    },
    // 查询
    handleSubmit(){
      this.getDataList()
    },
    // 删除
    deleteFn(val){
      this.$confirm({
        title: '您确定要删除该广告吗？',
        okText: '确定',
        cancelText: '取消',
        icon:'close-circle',
        onOk:() => {
          this.$axios.delete(`/rc/api/advert/del?id=${val.id}`).then(res => {
            if(res.success){
              this.$message.success(res.message)
              this.getDataList()
            }
          })
        }
      });
    },
    // 置顶
    stickFn(val){
      this.$confirm({
        title: '您确定要置顶该广告吗？',
        okText: '确定',
        cancelText: '取消',
        icon:'arrow-up',
        onOk:() => {
          this.$axios(`/rc/api/advert/stick?id=${val.id}`).then(res => {
            if(res.success){
              this.$message.success(res.message)
              this.getDataList()
            }
          })
        }
      });
    },
    // 新增
    addDeviceFn(){
      this.$router.push({ path:'/AD/manage'})
    },
    // 编辑
    editFn(val){
      console.log(val)
      this.$router.push({ path: `/AD/${val.id}`})
    }
  }
};
</script>

<style lang="scss" scoped>
  .ad-list-box{
    width: 100%;
    height: 100%;
    .ad-list-search-box{
      display: flex;
      justify-content: space-between;
    }
    .ad-list-table-box{
      padding-top: 10px;
    }
    .pagination{
      display: flex;
      justify-content: flex-end;
      padding-top: 10px;
    }
  }
</style>